import React, { Component } from 'react';
import { withRouter, } from 'react-router-dom';
import { TabBar } from 'antd-mobile';

import {
    AppOutline,
    AppstoreOutline,
    ShopbagOutline,
    UserOutline,
} from 'antd-mobile-icons'
import './Tabbar.scss'
class Tabbar extends Component {
    state = {
        tabs: [
            {
                key: '/index/home',
                title: '首页',
                icon: <AppOutline />
            },
            {
                key: '/index/Cate',
                title: '分类',
                icon: <AppstoreOutline />
            },
            {
                key: '/index/Shopcar',
                title: '购物车',
                icon: <ShopbagOutline />
            },
            {
                key: '/index/Mine',
                title: '我的',
                icon: <UserOutline />
            },
        ]
    }
    handleChange(key) {
        console.log(key, "key")
        if (key ==='/index/all') {
            console.log(this.props.history, "40")

            this.props.history.push(key)
        } else {
            console.log(this.props.history, "44")
            this.props.history.push(key)
        }
    }
    render() {
        return (
            <TabBar className='tabbar' onChange={(key) => { this.handleChange(key) }}>
                {
                    this.state.tabs.map((item, index) => {
                        return (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                        )
                    })
                }
            </TabBar>
        );
    }
}

export default withRouter(Tabbar);